<template>
	<van-nav-bar title="个人中心" />
	<div class="g-wrapper">
		<div class="g-user-info" v-if="account">
			<van-image round width="60px" height="60px" :src="account.url" />
            <p>昵称:{{account.username}}</p>
		</div>
        <div v-else style="color: white; text-align: center;line-height:150px;">
            用户未登录
        </div>
        <van-button v-if="!account" round color="#f9826a" style=" position: absolute;bottom: 5px; right: 5px;" @click="bindLogin">用户登录</van-button>
        <van-button v-else round color="#f9826a" style=" position: absolute;bottom: 5px; right: 5px;" @click="bindLogout">退出登录</van-button>
	</div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()

const account = ref(null)

/**
 * 登录
 */
const bindLogin = ()=>{
    router.push({path:'/login'})
}
/**
 * 退出
 */
const bindLogout = ()=>{
    localStorage.removeItem('userinfo')  // 移除名为userinfo的数据
    account.value = null  // 刷新界面
}

 onMounted(() => {
     const userinfo = localStorage.getItem('userinfo') // 获取数据
     account.value = JSON.parse(userinfo)
 })


</script>

<style lang="css" scoped>
.g-wrapper {
	width: 100%;
	height: 150px;
	background-color: #a52a2a;
    position: relative;
}
.g-user-info{
    padding: 10px;
    display: flex;
    width: 200px;
    align-items: center;
}
.g-user-info p{
    color:white;
    margin-left: 5px;
}
</style>
